1
00:00:02,040 --> 00:00:04,180
Agora o que aprendemos sobre funks

2
00:00:04,180 --> 00:00:06,450
e criadores de ação funk,

3
00:00:06,450 --> 00:00:08,860
então esse criador de ação funciona aqui.

4
00:00:08,860 --> 00:00:10,930
Agora, aprendemos sobre isso,

5
00:00:10,930 --> 00:00:14,770
vamos construir um criador de ações de aplicativo que busque o carrinho

6
00:00:14,770 --> 00:00:17,150
quando o aplicativo é carregado.

7
00:00:17,150 --> 00:00:19,880
Porque no momento estamos apenas enviando dados

8
00:00:19,880 --> 00:00:22,830
mas nunca buscamos dados quando o aplicativo foi carregado.

9
00:00:22,830 --> 00:00:27,610
E portanto, se recarregarmos, todo o nosso estado ainda estará perdido

10
00:00:27,610 --> 00:00:29,790
e é claro que esse não é o objetivo.

11
00:00:29,790 --> 00:00:32,259
Agora podemos montar esse código no componente

12
00:00:32,259 --> 00:00:33,840
ou como criador de ação,

13
00:00:33,840 --> 00:00:36,840
mas aqui eu quero me limitar aos criadores de ação

14
00:00:36,840 --> 00:00:40,010
e, portanto, podemos adicionar uma segunda fatia de carrinho de função.

15
00:00:40,010 --> 00:00:42,750
Mas como este arquivo está ficando cada vez maior,

16
00:00:42,750 --> 00:00:45,810
Sou fã de criar um arquivo separado para isso.

17
00:00:45,810 --> 00:00:48,930
Vamos talvez chamá-lo de cart-actions.js,

18
00:00:48,930 --> 00:00:50,830
claro, o nome do arquivo depende de você.

19
00:00:52,070 --> 00:00:55,590
Em seguida, copiarei esta função sendCartData,

20
00:00:55,590 --> 00:00:57,780
corte-o da fatia do carrinho

21
00:00:57,780 --> 00:01:01,140
e adicionei carrinho-ações

22
00:01:01,140 --> 00:01:04,540
e agora precisamos importar ações da UI aqui.

23
00:01:04,540 --> 00:01:08,470
Então, no carrinho, vou me livrar dessa importação, cortar isso

24
00:01:08,470 --> 00:01:11,720
e adicione isso em ações de carrinho.

25
00:01:11,720 --> 00:01:13,880
E em app.js, agora precisamos

26
00:01:13,880 --> 00:01:15,030
importar sendCartsData

27
00:01:16,200 --> 00:01:18,653
de ações da loja/carrinho.

28
00:01:19,650 --> 00:01:22,210
E então adicionarei minha função de criador de ações no aplicativo

29
00:01:22,210 --> 00:01:25,070
neste arquivo de ações do carrinho também.

30
00:01:25,070 --> 00:01:28,080
Então essa poderia ser a função fetctCardData

31
00:01:29,160 --> 00:01:30,610
e também exportarei isso

32
00:01:30,610 --> 00:01:33,080
porque precisaremos dele em outro lugar também.

33
00:01:33,080 --> 00:01:36,900
E assim como antes, retornará imediatamente uma função

34
00:01:36,900 --> 00:01:39,080
que é despachado como um argumento

35
00:01:39,080 --> 00:01:41,330
e então faz outra coisa.

36
00:01:41,330 --> 00:01:45,080
Agora aqui também poderíamos enviar algumas notificações

37
00:01:45,080 --> 00:01:46,520
se quisermos fazer isso,

38
00:01:46,520 --> 00:01:48,700
mas na verdade aqui não farei isso.

39
00:01:48,700 --> 00:01:51,480
Em vez disso, criarei uma nova função, fetchData,

40
00:01:55,090 --> 00:01:57,710
e tem função aninhada que é assíncrona

41
00:01:57,710 --> 00:01:59,560
porque usarei a API fetch

42
00:01:59,560 --> 00:02:03,150
e eu quero agrupar um fetchData com tentar capturá-lo depois

43
00:02:03,150 --> 00:02:06,130
é por isso que estou colocando-o em uma função separada.

44
00:02:06,130 --> 00:02:09,539
Então aguardamos a ação de busca e obtemos uma resposta aqui

45
00:02:09,539 --> 00:02:12,010
e quero buscar enviando uma solicitação

46
00:02:12,010 --> 00:02:14,210
para o mesmo URL novamente

47
00:02:15,140 --> 00:02:17,510
mas desta vez deve ser uma solicitação get.

48
00:02:17,510 --> 00:02:20,670
Portanto, não precisamos adicionar este objeto de configuração

49
00:02:20,670 --> 00:02:22,380
como segundo parâmetro,

50
00:02:22,380 --> 00:02:25,113
porque recebo request é o padrão, de qualquer maneira.

51
00:02:26,880 --> 00:02:30,530
Em vez disso, desta vez estou interessado nos dados,

52
00:02:30,530 --> 00:02:32,890
então, no resultado da chamada, aguarde

53
00:02:33,890 --> 00:02:35,840
resposta.Json

54
00:02:35,840 --> 00:02:37,540
mas é claro, eu também ainda quero verificar

55
00:02:37,540 --> 00:02:40,900
se a resposta talvez não esteja correta por qualquer motivo

56
00:02:40,900 --> 00:02:43,740
e se for esse o caso, lançarei um novo erro

57
00:02:44,630 --> 00:02:48,163
onde eu digo, "não foi possível buscar os dados do carrinho"

58
00:02:49,260 --> 00:02:51,463
algo assim.

59
00:02:52,930 --> 00:02:56,240
Agora, se fizermos passar esta linha de código aqui,

60
00:02:56,240 --> 00:02:58,310
nós temos os dados

61
00:02:58,310 --> 00:03:00,870
e então vou devolvê-lo aqui,

62
00:03:00,870 --> 00:03:02,310
Vou devolvê-lo aqui porque

63
00:03:02,310 --> 00:03:05,150
essa não é uma função aninhada separada.

64
00:03:05,150 --> 00:03:08,743
Portanto, aqui tentarei executar fetchData

65
00:03:09,850 --> 00:03:12,893
e detectar quaisquer erros que possamos estar recebendo.

66
00:03:14,720 --> 00:03:15,780
E se obtivermos um erro,

67
00:03:15,780 --> 00:03:18,760
ainda podemos querer mostrar o erro na notificação.

68
00:03:18,760 --> 00:03:23,330
Então, enviarei esta ação de notificação de erro novamente

69
00:03:23,330 --> 00:03:24,193
aqui embaixo,

70
00:03:25,060 --> 00:03:27,567
mas direi: "falha na busca dos dados dos carrinhos".

71
00:03:28,660 --> 00:03:33,007
Se, no entanto, formos o bloco try ou aguardarmos fetchData,

72
00:03:33,920 --> 00:03:35,760
Eu posso fazer isso

73
00:03:35,760 --> 00:03:38,893
se eu transformasse isso em uma função assíncrona, o que podemos,

74
00:03:40,050 --> 00:03:41,630
Redux suporta isso,

75
00:03:41,630 --> 00:03:44,980
aquela disfunção que retornamos aqui é assíncrona.

76
00:03:44,980 --> 00:03:46,780
Então podemos usar wait aqui também

77
00:03:46,780 --> 00:03:50,700
e isso me dá os dados do meu carrinho

78
00:03:50,700 --> 00:03:53,727
pois estou retornando os dados que passamos aqui

79
00:03:55,034 --> 00:03:58,950
e por enquanto quero usar os dados do carrinho para definir meu carrinho.

80
00:03:59,890 --> 00:04:01,810
Agora, os dados do carrinho que estamos buscando,

81
00:04:01,810 --> 00:04:05,350
teremos aquele formato que está armazenado no Firebase

82
00:04:05,350 --> 00:04:07,100
e esse é o formato que estamos enviando

83
00:04:07,100 --> 00:04:08,910
para o Firebase, é claro.

84
00:04:08,910 --> 00:04:11,870
Será esse carrinho, que estamos enviando para lá

85
00:04:11,870 --> 00:04:14,050
então é um objeto com a chave items,

86
00:04:14,050 --> 00:04:17,540
com em uma matriz dentro e uma chave de quantidade total.

87
00:04:17,540 --> 00:04:20,089
Qual é exatamente o formato que precisamos aqui

88
00:04:20,089 --> 00:04:22,580
em nosso front-end também.

89
00:04:22,580 --> 00:04:25,000
O que não é surpresa porque estamos enviando

90
00:04:25,000 --> 00:04:27,060
aquele instantâneo do estado Redux

91
00:04:27,060 --> 00:04:29,610
como dados no final e no final.

92
00:04:29,610 --> 00:04:33,330
Então, recuperamos automaticamente os dados formatados corretamente aqui

93
00:04:33,330 --> 00:04:37,030
e não precisamos transformar os dados do Firebase primeiro

94
00:04:37,030 --> 00:04:41,330
por ter o formato que enviamos para o Firebase anteriormente.

95
00:04:41,330 --> 00:04:44,476
Isso é diferente de outras seções do curso,

96
00:04:44,476 --> 00:04:47,590
aqui tivemos que transformar os dados do Firebase

97
00:04:47,590 --> 00:04:51,970
porque lá usamos post para enviar nossos dados

98
00:04:51,970 --> 00:04:53,640
não colocado como estamos fazendo aqui

99
00:04:53,640 --> 00:04:56,850
e, portanto, deixamos o Firebase criar uma lista de dados

100
00:04:56,850 --> 00:05:00,010
que acabou sendo um objeto quando o buscamos.

101
00:05:00,010 --> 00:05:03,620
Você deve se lembrar disso na seção HTTP do curso

102
00:05:03,620 --> 00:05:08,040
aqui com put estamos enviando nossos snapshots de dados para o Firebase

103
00:05:08,040 --> 00:05:11,450
e o Firebase irá pegá-lo como está e armazená-lo como está

104
00:05:11,450 --> 00:05:12,830
sem alterá-lo.

105
00:05:12,830 --> 00:05:16,460
Então, quando o buscamos, também temos que corrigir a estrutura

106
00:05:16,460 --> 00:05:19,720
e, portanto, os dados do carrinho estão formatados corretamente

107
00:05:19,720 --> 00:05:24,720
e, portanto, agora podemos usar este redutor de carrinho de substituição,

108
00:05:24,730 --> 00:05:28,030
que forneci a você anteriormente neste módulo

109
00:05:28,030 --> 00:05:30,280
para substituir nosso carrinho frontal

110
00:05:30,280 --> 00:05:32,770
com o carrinho que estamos carregando do Firebase

111
00:05:33,610 --> 00:05:35,680
e substituir carrinho espera uma carga útil

112
00:05:35,680 --> 00:05:37,280
que tem uma quantidade total

113
00:05:37,280 --> 00:05:40,540
e um campo de itens que é exatamente a estrutura de dados

114
00:05:40,540 --> 00:05:42,750
estamos buscando no Firebase.

115
00:05:42,750 --> 00:05:47,750
Então, nas ações do carrinho, só queremos importar

116
00:05:47,840 --> 00:05:50,620
nossas ações de carrinho

117
00:05:51,820 --> 00:05:54,500
da fatia do carrinho,

118
00:05:54,500 --> 00:05:57,633
então essas ações geradas automaticamente agora.

119
00:05:59,480 --> 00:06:04,480
E aqui, quero despachar a substituição das ações do carrinho,

120
00:06:04,920 --> 00:06:07,580
não remova, substitua o carrinho

121
00:06:07,580 --> 00:06:10,280
e passar os dados dos meus carrinhos como carga útil,

122
00:06:10,280 --> 00:06:13,563
que como mencionado já possui a estrutura correta.

123
00:06:14,850 --> 00:06:17,410
Agora poderíamos ter feito tudo para mostrar a notificação de sucesso

124
00:06:17,410 --> 00:06:20,470
mas não quero fazer isso, só quero usar os dados do carrinho

125
00:06:20,470 --> 00:06:21,963
e estamos prontos para ir.

126
00:06:23,120 --> 00:06:27,820
Feito tudo isso, agora só precisamos chamar fetch cartData

127
00:06:27,820 --> 00:06:30,090
em algum lugar da nossa aplicação

128
00:06:30,090 --> 00:06:33,950
para começar a buscar nosso cartData no Firebase.

129
00:06:33,950 --> 00:06:37,560
E, novamente, app.js é provavelmente um bom lugar para isso.

130
00:06:37,560 --> 00:06:40,500
Aqui já temos uma chamada de fato do usuário

131
00:06:40,500 --> 00:06:43,270
e que queremos começar a buscar dados aqui

132
00:06:43,270 --> 00:06:45,680
se este aplicativo for carregado.

133
00:06:45,680 --> 00:06:48,530
Poderíamos fazer isso aqui nesta verificação inicial

134
00:06:48,530 --> 00:06:51,000
porque papai só vai correr se for a primeira vez

135
00:06:51,000 --> 00:06:52,470
que esse efeito seja executado.

136
00:06:52,470 --> 00:06:55,240
Mas acho que é mais limpo criar um efeito separado

137
00:06:55,240 --> 00:06:57,710
que simplesmente não tem nenhuma dependência

138
00:06:57,710 --> 00:06:59,910
e que, portanto, todos eles só executarão

139
00:06:59,910 --> 00:07:04,500
se este componente foi renderizado pela primeira vez

140
00:07:04,500 --> 00:07:06,400
e como é nosso principal componente

141
00:07:06,400 --> 00:07:08,230
isso só será renderizado uma vez.

142
00:07:08,230 --> 00:07:12,030
E, portanto, aqui podemos despachar

143
00:07:12,030 --> 00:07:15,950
esta nova ação de carrinho criada, esta ação de carrinho personalizada.

144
00:07:15,950 --> 00:07:19,060
Então esta ação fetchcartData,

145
00:07:19,060 --> 00:07:20,950
Quero despachar isso aqui

146
00:07:21,920 --> 00:07:25,630
e despacho como uma dependência para fins de integridade

147
00:07:25,630 --> 00:07:27,800
mas como eu disse, isso nunca vai mudar,

148
00:07:27,800 --> 00:07:30,030
então esse efeito nunca será repetido

149
00:07:30,030 --> 00:07:33,970
e isso irá despachar isso sempre que nosso aplicativo for iniciado.

150
00:07:33,970 --> 00:07:37,070
Portanto, se você salvou isso e recarregou, verá

151
00:07:37,070 --> 00:07:39,140
que isso seja preenchido.

152
00:07:39,140 --> 00:07:41,710
Mas você também notará que, por algum motivo

153
00:07:41,710 --> 00:07:44,940
também vemos dados do carrinho enviados com sucesso aqui

154
00:07:46,100 --> 00:07:48,900
e estamos enviando uma solicitação ao Firebase

155
00:07:48,900 --> 00:07:52,020
para armazenar os dados do carrinho novamente.

156
00:07:52,020 --> 00:07:54,130
Então, estamos buscando, como podemos dizer

157
00:07:54,130 --> 00:07:55,900
temos os dados do nosso carrinho aqui

158
00:07:55,900 --> 00:07:58,360
e se eu mudar e recarregar,

159
00:07:58,360 --> 00:08:00,850
vemos que buscamos essa alteração nos dados,

160
00:08:00,850 --> 00:08:03,650
mas ao mesmo tempo parece que estamos enviando novamente.

161
00:08:03,650 --> 00:08:05,263
E você sabe por quê?

162
00:08:06,350 --> 00:08:08,990
estamos enviando novamente porque em app.js

163
00:08:08,990 --> 00:08:11,780
temos esse efeito para envio dos dados do carrinho

164
00:08:11,780 --> 00:08:14,940
que executaremos sempre que os carrinhos forem alterados.

165
00:08:14,940 --> 00:08:17,880
O problema é quando buscamos os dados dos carrinhos,

166
00:08:17,880 --> 00:08:21,840
terminada a busca, substituímos um carrinho, certo?

167
00:08:21,840 --> 00:08:23,230
Substituímos um carrinho

168
00:08:24,110 --> 00:08:26,530
aqui com os dados buscados,

169
00:08:26,530 --> 00:08:29,890
isso muda o carrinho dentro do Redux.

170
00:08:29,890 --> 00:08:32,049
Agora, desde que aquele carrinho mudou

171
00:08:32,049 --> 00:08:36,110
acionamos esse efeito do app e enviamos novamente os dados do carrinho.

172
00:08:36,110 --> 00:08:37,883
Então, como podemos agora contornar isso?